<!--
 * @Description: 
 * @Author: lijiajin
 * @Date: 2020-07-06 09:04:53
 * @LastEditTime: 2020-07-10 11:59:50
 * @LastEditors: lijiajin
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <title>网站管理-基本信息</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css">
    <link rel="stylesheet" href="./css/nanoscroller.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/JQuery2.1.4.js"></script>
    <script src="./plugins/layui/layui.js"></script>
    <script src="./js/spin.min.js"></script>
    <script src="./js/loading.js"></script>

</head>

<body>
<div class="wrap-box wrap-bank-pic wrap-bank-pic-dialog">
    <div class="pic-box">
        <div class="fenlei-div nano">
            <div class="fenlei nano-content">
                <div id="tree"></div>
            </div>
        </div>

        <div class="list">

            <div class="top">
                <form class="fl" id="pic_bank_upload_form" onsubmit="return false;">
                    <!--<div id="pic_bank_uploader" class="layui-btn upload-pic">上传图片</div>-->
                    <div class="pic-bank-top-upload-btn layui-btn">
                        上传图片
                        <input type="file" multiple name="file[]" id="file_upload"
                               accept="image/jpg,image/jpeg,image/png" onchange="checkFile(this)"/>
                    </div>
                </form>
                <form class="fr" action="">
                    <input type="text" name="aaa"/>
                    <button type="submit"><img src="./images/search.png"/></button>
                </form>
            </div>

            <!--has data-->
            <div class="list-div nano" style="display: block">
                <ul class="nano-content" id="img_bank_box">
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/watermark_img.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    <li data-id="2">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic($(this))"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>

                </ul>
            </div>

            <!--empty data-->
            <div class="no-pic" style="display: none;">
                <img src="./images/no_pic.png"/>
            </div>

            <!--page-->
            <div class="page-div">
                <span class="total">共44张图片</span>
                <a class="prev icon iconfont icondayu" href=""></a>
                <a href="">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a class="ellipsis icon iconfont iconicongengduo" href=""></a>
                <a href="">4</a>
                <a href="">9</a>
                <a href="">10</a>
                <a class="next icon iconfont icondayu1" href=""></a>
            </div>

        </div>
    </div>
    <!--</div>-->
</div>
<script>
    var limitPicMaxNum = parent.limitPicMaxNum; // 最大限制数量
    var surplusPicNum = parent.surplusPicNum; // 剩余数量
</script>

<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.nanoscroller.js"></script>
<script src="./js/check.js"></script>
<script src="./js/common.js"></script>
<script src="./js/form-commit.js"></script>

<script>
    // 参考链接 https://www.layui.com/doc/modules/tree.html
    var tree;
    layui.use(['tree'], function () {
        var $ = layui.$
        tree = layui.tree

        //数据源  checked: true默认选中  href链接  disabled: true禁选
        var data = [{
            title: '一级1'
            , id: 1
            , children: [{
                title: '二级1-1'
                , id: 3
                , href: 'https://www.layui.com/doc/'
                , children: [{
                    title: '三级1-1-3'
                    , id: 23
                    , children: [{
                        title: '四级1-1-3-1'
                        , id: 24
                        , children: [{
                            title: '五级1-1-3-1-1'
                            , id: 30
                        }, {
                            title: '五级1-1-3-1-2'
                            , id: 31
                        }]
                    }]
                }, {
                    title: '三级1-1-1'
                    , id: 7
                    , checked: true // 默认选中
                    , children: [{
                        title: '四级1-1-1-1'
                        , id: 15
                        //,checked: true
                        , href: 'https://www.layui.com/doc/base/infrastructure.html'
                    }]
                }, {
                    title: '三级1-1-2'
                    , id: 8
                    , children: [{
                        title: '四级1-1-2-1'
                        , id: 32
                    }]
                }]
            }, {
                title: '二级1-2'
                , id: 4
                , spread: true
                , children: [{
                    title: '三级1-2-1'
                    , id: 9
                    , checked: true
                    , disabled: true
                }, {
                    title: '三级1-2-2'
                    , id: 10
                }]
            }, {
                title: '二级1-3'
                , id: 20
                , children: [{
                    title: '三级1-3-1'
                    , id: 21
                }, {
                    title: '三级1-3-2'
                    , id: 22
                }]
            }]
        }, {
            title: '一级2'
            , id: 2
            , spread: true
            , children: [{
                title: '二级2-1'
                , id: 5
                , spread: true
                , children: [{
                    title: '三级2-1-1'
                    , id: 11
                }, {
                    title: '三级2-1-2'
                    , id: 12
                }]
            }, {
                title: '二级2-2'
                , id: 6
                , checked: true
                , children: [{
                    title: '三级2-2-1'
                    , id: 13
                }, {
                    title: '三级2-2-2'
                    , id: 14
                    , disabled: true
                }]
            }]
        }, {
            title: '一级3'
            , id: 16
            , children: [{
                title: '二级3-1'
                , id: 17
                , fixed: true
                , children: [{
                    title: '三级3-1-1'
                    , id: 18
                }, {
                    title: '三级3-1-2'
                    , id: 19
                }]
            }, {
                title: '二级3-2'
                , id: 27
                , children: [{
                    title: '三级3-2-1'
                    , id: 28
                }, {
                    title: '三级3-2-2'
                    , id: 29
                }]
            }]
        }];

        tree.render({
            elem: '#tree'
            , data: data
            , id: 'role'
            , click: function (obj) { // 点击节点监听
                // console.log("click:" + obj);
            }
            , oncheck: function (obj) { // 选择复选框监听
                // console.log("oncheck:" + obj);
            }
            , showCheckbox: false  //是否显示复选框
            , accordion: 0  //是否开启手风琴模式
            , onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
            , isJump: 0  //点击文案跳转地址
            , edit: false  //操作节点图标
            , isJump: true // 是否允许跳转href
        });
    });

</script>
</body>

</html>